<!DOCTYPE html>
<html>
<head>
	<title>transition</title>
	<meta charset="utf-8" />
</head>
<body>
	<ul id="box">
		<li class="cuoye">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<img src="cuoye.jpg">
		</li>
	</ul>
</body>
</html>
<style type="text/css">
	ul{
		padding:0;
		margin:0;
		border:1px solid #000;
	}
	ul::after{
		content:".";
		display:block;
		width:0;
		height:0;
		overflow: hidden;
		clear:both;
	}
	ul li{
		list-style: none;
		float:left;
		margin:10px;
		width:100px;
		height:100px;
		transition:background-color .5s,transform 5s;
	}
	li img{
		height:100%;
		width:100%;
		transition:all 5s;
	}
	ul li i{
		display:block;
		width:50px;
		height:50px;
		margin:25px auto 0 auto;
		transition:background-color 1s,transform 10s;
	}
	/*transitions*/
	.li_0:hover{
		transition:all .2s;/*单边覆盖控制*/
		transform:skew(45deg,45deg);
	}
	.li_1:hover{
		transform:scale(1.4) rotate(45deg);;
	}
	.cuoye{
		position:relative;
		overflow:hidden;
	}
	.cuoye img:hover{
		transform:scale(1.4);
	}
	/*延生条*/
	.cuoye div{
		position:absolute;
		z-index:1;
		background-color:yellow;
		transition:all 5s;
	}
	.cuoye div:first-child{
		width:5px;
		height:0;
		top:0;
		left:0;
	}
	.cuoye div:nth-child(2){
		height:5px;
		width:0;
		bottom:0;
		left:0;
	}
	.cuoye div:nth-child(3){
		width:5px;
		height:0;
		bottom:0;
		right:0;
	}
	.cuoye div:nth-child(4){
		height:5px;
		width:0;
		top:0;
		right:0;
	}
	.cuoye:hover div:first-child{
		height:95px;
	}
	.cuoye:hover div:nth-child(2){
		width:95px;
	}
	.cuoye:hover div:nth-child(3){
		height:95px;
	}
	.cuoye:hover div:nth-child(4){
		width:95px;
	}
  /*多步动画效果*/
  /*不同属性可以使用delay*/
  .li_2 i{
  	transition:width 1s ease-out 1s,transform 1s;
  }
  .li_2 i:hover{
  	width:100px;
  	transform:translateX(-25px);
  }
  /*弧线运动尝试*/
  .li_3{
  	position:relative;
  }
  .li_3 i{
  	position:absolute;
  	top:0;
  	left:0;
  	transition:border-radius .5s,top 2s cubic-bezier(1,.5,.2,0) .5s,left 2s .5s;
  }
  .li_3 i:hover{
  	border-radius:50%;
  	top:300px;
  	left:-300px;
  }
  /*animation*/
  .li_4{
  	animation-name:test0;
  	animation-duration:5s;
		animation-iteration-count:infinite;
		animation-direction:alternate;
  	-webkit-animation-name:test0;
		-webkit-animation-duration:5s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-direction:alternate;

  }
  @keyframes test0{
  	from {border-radius:0;}
  	to{border-radius:50%;}
  }
</style>
<script type="text/javascript">
	//两种颜色的随机方法
	function randomColor1(){
		let arr=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"],color="#";
		for(let i=0;i<6;i++){
      		color+=arr[parseInt(Math.random()*16)];
		}
		// console.log(color);
		return color;
	}
	function randomColor2(){
		let color=`rgba(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`
		// console.log(color);
		return color;
	}
	randomColor1();
	randomColor2();
	let count=0,box=document.getElementById("box");
	function newLi(){
		let li=document.createElement('li'),lii=document.createElement('i');
	  li.setAttribute("class",'li_'+count);
	  li.setAttribute("onclick","liClick(event)");
	  li.appendChild(lii)
		box.appendChild(li)
		//加载无动画BUG
		setTimeout(()=>{
			li.style.backgroundColor=randomColor1();
	  	lii.style.backgroundColor=randomColor1();//此处chrome60不兼容randomColor2
		},0)

	  count++;
	}
	for(let i=0;i<10;i++){
		newLi();
	}
	//点击事件
	function liClick(e){
		e=e||window.event;
		//换色
		e.target.style.backgroundColor=randomColor1();
	}
</script>